import React, { memo, useState } from "react";
import { useSelector } from "react-redux";
import "./index.scss";

import WYSongsCategory from "../songs-category";

export default memo(function WYSongsHeader(props) {
  // props-state
  const [isShowCategory, setShowCategory] = useState(false);
  // redux
  const songCatParams = useSelector((state) =>
    state.getIn(["songlist", "songCatParams"])
  );

  return (
    <div className="wy-songs-header">
      <div className="song-l">
        <div className="title">{songCatParams&&songCatParams.cat}</div>
        <button
          className="select"
          onClick={(e) => setShowCategory(!isShowCategory)}
        >
          <span>选择分类</span>
          <i className="sprite_icon2"></i>
        </button>
        {/* 分类展示 */}
        {isShowCategory && <WYSongsCategory />}
      </div>

      <div className="song-r">
        <button className="hot">热门</button>
      </div>
    </div>
  );
});
